<template>
    <div class="content-container">
        <Title :icon="'questionnaire-fill'" :title="'问题排名'"></Title>
        <div class="h-290px aq-data1">
            <table class="distillation-table aq-table">
                <tr>
                    <th width="20%">排名</th>
                    <th width="50%">问题蒸馏词</th>
                    <th width="30%">问题总量</th>
                </tr>
            </table>
            <div class="h-240px overflow-hidden">
                <el-scrollbar>
                    <table class="distillation-table aq-table">
                        <tr v-for="(row, index) in state.tableData" :key="index">
                            <td width="20%"><mark>{{ index + 1 }}</mark></td>
                            <td width="50%">{{ row.Keyword }}</td>
                            <td width="30%">{{ row.Num }}</td>
                        </tr>
                    </table>
                </el-scrollbar>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import Title from '@/components/Title/index.vue'
import { getQuestionRankApi } from '@/api/geo/index'

const route = useRoute()

const state = reactive({
    tableData: <{
        Num: number;
        Keyword: string;
    }[]>[],
})

async function getQuestionRank(id: any) {
    const res: ResType = await getQuestionRankApi({
        skip: id
    })
    if (res.code === 200) {
        state.tableData = res.data
    }
}

onMounted(() => {
    const { skip } = route.query
    getQuestionRank(skip)
})
</script>

<style lang="scss">
.aq-table {
    tr {
        &:nth-child(1) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #fc5d55;
                    }
                }
            }
        }

        &:nth-child(2) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #ff9e47;
                    }
                }
            }
        }

        &:nth-child(3) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #578eff;
                    }
                }
            }
        }

        td {
            mark {
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: var(--title-color);
                border-radius: 6px 0 6px 6px;
                text-align: center;
                background: none;
            }
        }
    }
}
</style>